<template>
  <div class="router_view">

    

    <!--<router-view> 是一个指令，它会根据应用的路由匹配结果动态插入子组件-->
    <router-view v-slot="{ Component }">
      <!--:is绑定是用于动态切换元素的标签名，即动态地创建一个组件实例并将其挂载到当前的位置-->
      <!--这里的Component变量就是决定要显示哪个子组件的依据，由当前的路由配置决定-->
      <component :is="Component" />
    </router-view>
    
    <GlobalTabbar v-if="actived != undefined"></GlobalTabbar>
  </div>
</template>


<script setup lang="ts">
import { watch, ref, provide } from "vue";
import GlobalTabbar from "@/components/GlobalTabbar.vue";
import { useRouter } from "vue-router";

const actived = ref(0);
const router = useRouter();

// watch函数的第一个参数是一个回调函数
// 该函数会在每次router.currentRoute.value（当前路由对象）改变时执行。通过访问newValue.meta.tabbarIndex
// 获取到路由新的详细信息里的tabbarIndex值，并将其赋给变量actived
watch(
  () => router.currentRoute.value,
  (newValue) => {
    actived.value = newValue.meta.tabbarIndex as number;
  }
);
provide("actived", actived);
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.icon {
  width: 25px;
  height: 25px;
}


</style>
